<template>
    <div class="mainBox">
        <el-form ref="medicine">
            <el-form-item label="药品名称" prop="name">
                <el-input v-model="medicine.name" placeholder="请输入药品名称"></el-input>
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="medicine.startDate"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker type="date" placeholder="选择日期" v-model="medicine.endDate"></el-date-picker>
            </el-form-item>
            <el-form-item label="服用次数">
                <el-select v-model="medicine.reminderListCount" placeholder="每天几次" id="select1">
                    <el-option :label="`${index + 1}次`"
                               :value="index+1"
                               v-for="(val, index) in new Array(maxReminder)"
                               :key="index"/>
                </el-select>
            </el-form-item>
            <el-form-item v-for="(reminderItem, index) in reminderListCountChange"
                          :label="`第 ${index + 1} 次`"
                          :key="index">
                <el-time-picker
                    v-model="reminderItem.timeDate"
                    placeholder="任意时间点"
                    format="HH:mm">
                </el-time-picker>
            </el-form-item>
            <el-form-item label="每次计量">
                <el-input v-model="medicine.dosage" placeholder="请输入每次计量"></el-input>
            </el-form-item>
        </el-form>
        <button class="btn btnFocus" @click="submit($event)">完 成</button>
    </div>
</template>

<script>
export default {

    props: {
        id: {
            type: String,
            required: true
        },
        name: {
            type: String,
            required: true
        },
        startDate: {
            type: Date,
            required: true
        },
        endDate: {
            type: Date,
            required: true
        },
        dosage: {
            type: String,
            required: true
        },
        reminderItemList: {
            type: Array,
            required: true
        }
    },

    data() {
        return {
            // 可选择的最大服用次数
            maxReminder: 20,
            medicine: {}
        }
    },

    methods: {
        submit($event) {
            if (!this.medicine.name) return this.$message({
                message: '药品名称不能为空',
                type: 'warning'
            })
            if (!this.medicine.startDate) return this.$message({
                message: '开始时间不能为空',
                type: 'warning'
            })
            if (!this.medicine.endDate) return this.$message({
                message: '结束时间不能为空',
                type: 'warning'
            })
            if (this.medicine.endDate < this.medicine.startDate) return this.$message({
                message: '结束时间不能早于开始时间',
                type: 'warning'
            })
            if (!this.medicine.dosage) return this.$message({
                message: '每次计量不能为空',
                type: 'warning'
            })

            // 按钮防抖
            this.$public.bottomDisableOrAllow($event.target, "正在保存...", true)

            this.request.post("/medicineReminder/saveReminder/", {
                id: this.medicine.id,
                name: this.medicine.name,
                startDateTimeStamp: this.$public.dateToTimeStampString(this.medicine.startDate),
                endDateTimeStamp: this.$public.dateToTimeStampString(this.medicine.endDate),
                dosage: this.medicine.dosage + (this.medicine.dosage.includes("/次") ? "" : "/次"),
                reminderItemList: this.medicine.reminderItemList.map(reminderItem => {
                    return {
                        id: reminderItem.id,
                        timeStamp: this.$public.dateToTimeStampString(reminderItem.timeDate)
                    }
                })
            }).then((response) => {
                const status = response["code"] === 200

                if (status) {
                    setTimeout(() => {
                        this.$router.back()
                    }, 500)
                }

                this.$public.bottomDisableOrAllow($event.target, "完 成", false)
            }).catch((error) => {
                this.$public.bottomDisableOrAllow($event.target, "完 成", false)
            })
        },
    },

    computed: {
        // 更改服用次数事件
        reminderListCountChange() {
            while (this.medicine.reminderItemList.length < this.medicine.reminderListCount) {
                let newReminderItem = {id: "", timeDate: new Date(new Date().setSeconds(0))}
                this.medicine.reminderItemList.push(newReminderItem)
            }
            while (this.medicine.reminderItemList.length > this.medicine.reminderListCount) delete this.medicine.reminderItemList.pop()
            return this.medicine.reminderItemList
        }
    },

    watch: {
        // 药品信息
        id: {
            handler() {
                this.medicine = {
                    id: this.id,
                    name: this.name,
                    startDate: this.startDate,
                    endDate: this.endDate,
                    dosage: this.dosage,
                    reminderItemList: JSON.parse(JSON.stringify(this.reminderItemList)),
                    reminderListCount: this.reminderItemList.length ? this.reminderItemList.length : 1,
                }
            },
            immediate: true
        },
    }
}

</script>

<style lang="less" scoped>
.mainBox {
    text-align: center;
}

.btn {
    width: 100%;
    height: 50px;
    color: white;
    background-color: var(--color);
    border: none;
    outline: none;
    text-align: center;
    font-size: 22px;
}

::v-deep {
    .el-form {
        width: 100%;
        box-sizing: border-box;
        padding: 15px;
    }

    .el-form-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .el-form-item__label {
        width: 25%;
        text-align-last: justify;
    }

    .el-form-item__content {
        width: 70%;
    }

    .el-input, .el-select {
        width: 100%;
    }

    .el-form-item__label {
        font-size: 18px;
    }
}
</style>